<template>
  <div>
    <el-table height="100px" v-adaptive :data="deviceStatusList">
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <div
            class="statusDiv"
            :style="{ background: scope.row.backgroundColor }"
          ></div>
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="token" label="Token"> </el-table-column>
      <el-table-column prop="code" label="状态码"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 状态详情 -->
          <el-button
            type="text"
            size="mini"
            icon="el-icon-view"
            @click="openStatus(scope.row)"
          ></el-button>
          <!-- 编辑状态 -->
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit-outline"
            v-if="scope.row.icon !== 'default'"
            @click="editStatusWindow(scope.row, scope.$index)"
          ></el-button>
          <!-- 删除状态 -->
          <el-button
            v-permission="[20, 'button']"
            type="text"
            size="mini"
            icon="el-icon-delete"
            v-if="scope.row.icon !== 'default'"
            @click="delStatus(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 状态详情弹窗-->
    <device-status-details
      :tabstatus="tabstatus"
      :StatusDetailsshow="StatusDetailsshow"
      @changeShow="showStatusDetails"
      @detailsOpenDteails="detailsOpenDteails"
      :editShow="editShow"
    />
    <!-- 状态编辑弹窗-->
    <edit-device-status
      @getDeviceStatusList="getDeviceStatusData"
      :editStatus="editStatus"
      :EditShow="EditShow"
      @changeShow="editStatusDetails"
      :deviceTypeToken="deviceTypeToken"
    />
  </div>
</template>

<script>
import DeviceStatusDetails from "./DeviceStatusDetails.vue";
import EditDeviceStatus from "./EditDeviceStatus.vue";
import { deleteDeviceType } from "@/api/deviceType";
export default {
  props: {
    deviceTypeToken: {
      type: String,
      required: true,
    },
    deviceStatusList: {
      type: Array,
      default: [],
    },
  },
  components: {
    DeviceStatusDetails,
    EditDeviceStatus,
  },
  data() {
    return {
      editShow: true,
      StatusData: [
        {
          StatusName: "状态",
          StatusToken: "状态",
          StatusParameter: "状态",
        },
      ],
      StatusDetailsshow: false,
      EditShow: false,
      statussList: [],
      tabstatus: {},
      editStatus: {},
    };
  },
  mounted() {
    console.log("状态列表", this.deviceStatusList);
  },
  methods: {
    // 打开设备状态详情
    openStatus(row) {
      this.tabstatus = row;
      this.StatusDetailsshow = true;
      if (row.icon == "default") {
        this.editShow = false;
      } else {
        this.editShow = true;
      }
    },
    showStatusDetails(data) {
      if (data === "false") {
        this.StatusDetailsshow = false;
      } else {
        this.StatusDetailsshow = true;
      }
    },
    // 打开设备状态编辑
    editStatusWindow(row, index) {
      this.editStatus = row;
      this.EditShow = true;
      this.StatusDetailsshow = false;
    },
    // 详情打开编辑弹窗
    detailsOpenDteails(row, status) {
      this.editStatusWindow(row, status);
    },
    editStatusDetails(data) {
      if (data === "false") {
        this.EditShow = false;
      } else {
        this.EditShow = true;
      }
    },
    // 获取设备状态列表
    getDeviceStatusData() {
      this.$emit("updateDeviceStatusList");
    },

    // 删除状态
    delStatus(row) {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDeviceType(that.deviceTypeToken + "/statuses/" + row.token).then(
          (res) => {
            this.$msg({
              type: "success",
              message: "删除成功!",
            });
            that.getDeviceStatusData();
          }
        );
      });
    },
  },
};
</script>

<style lang="less" scoped>
.statusDiv {
  width: 14px;
  height: 14px;
  // background-color: red;
  float: left;
  border-radius: 3px;
  margin: 4px 10px 0px -7px;
  z-index: 9999;
}
</style>